<template>
  <div class="node-library">
    <div
      v-for="node in nodeTypes"
      :key="node.type"
      class="node-item"
      draggable="true"
      @dragstart="onDragStart(node)"
    >
      <el-icon><component :is="node.icon" /></el-icon>
      <span>{{ node.name }}</span>
    </div>
  </div>
</template>

<script setup>
import { markRaw } from 'vue';
import { Document, Operation, Rank, View, Upload } from '@element-plus/icons-vue';

const emit = defineEmits(['drag-node']);

const nodeTypes = [
  { name: '文件选择', type: 'input', icon: markRaw(Document) },
  { name: '数据预处理', type: 'process', icon: markRaw(Operation) },
  { name: '降维分析', type: 'process', icon: markRaw(Rank) },
  { name: '模型校准', type: 'process', icon: 'Setting' }, 
  { name: '结果预览', type: 'output', icon: markRaw(View) },
  { name: '文件导出', type: 'output', icon: markRaw(Upload) },
];

const onDragStart = (node) => {
  emit('drag-node', node);
};
</script>

<style scoped>
.node-library {
  padding: 10px;
}
.node-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: grab;
  background-color: #fff;
  transition: background-color 0.2s;
}
.node-item:hover {
  background-color: #f5f7fa;
}
.node-item .el-icon {
  margin-right: 8px;
}
</style>
